'use strict'


const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {inject_html, inject_js} = require('./dev-lib/inject')


const ENTRY_JS = './src/index.js'
const ENTRY_HTML = './src/index.html'
const MIDDLE_JS = './src/.index.js'
const MIDDLE_HTML = './src/.index.html'

const DIST = './dist'
const OUTPUT_JS = 'js/app.js'
const OUTPUT_HTML = 'index.html'
const OUTPUT_CSS = 'css/style.css'

inject_html(__dirname, ENTRY_HTML, MIDDLE_HTML)
inject_js(__dirname, ENTRY_JS, MIDDLE_JS)

module.exports= {
    entry: MIDDLE_JS,
    output: {
        filename: OUTPUT_JS,
        path: resolve(DIST),
    },
    module: {
        rules: [
            {
                test: /\.(css|less|sass)$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
            }
            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: MIDDLE_HTML,
            filename : OUTPUT_HTML
        }),
        new MiniCssExtractPlugin({
            filename: OUTPUT_CSS
        })
    ],
    mode: 'development'
}